<template>
  <div :class="$style.searchBox">
    <p v-if="label">{{label}}：</p>
      <el-select
      @input="(value) => onChange(value)"
      :value="inputValue"
      filterable
      remote
      clearable
      reserve-keyword
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    label:{
      type: String,
      default: ''
    },
    onChange: {
      type: Function,
      default: () => {}
    },
    onClear: {
      type: Function,
      default: () => {}
    },
    placeholder: {
      type: String,
      default: "请输入关键词"
    },
    onSearch: {
      type: Function,
      default: () => {}
    },
    loading: false,
    options: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    // inputValue() {
    //   return this.value;
    // }
  },
  mounted(){
    if(this.name){
      this.remoteMethod(this.name)
      let that = this
      setTimeout(() => {
        that.inputValue = this.value
      }, 100);
    }
  },
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    clearSearch() {
      //   this.onChange('')
      this.onClear();
    },
     remoteMethod(query) {
      //  console.log('query', query)
       this.onSearch(query)
      },
      Choose(val){
        console.log('ssssssssssss',val)
      },
  },
  created() {}
};
</script>
<style module lang='scss'>
.el-select .el-input {
  width: 160px !important; 
}
.searchBox {
  display: flex;
  align-items: center;
  :global {
    .el-input__inner {
      height: 32px;
    }
    p{
      font-size: 14px;
      color: #666666;
      align-items: center;
      margin-right: 20px;
    }
    .el-input{
      width: auto;
    }
  }
}
</style>
